<template>
  <div class="content" style="">
    <span style="font-size: 17px; margin-left: 20%; font-weight: light"
      >文章列表</span
    >
  </div>
  <div class="search">
    <a-input-search
      v-model:value="value1"
      placeholder="输入文章编号"
      style="width: 150px"
      @search="onSearch1"
    />
    <a-input-search
      v-model:value="value2"
      placeholder="输入文章标题"
      style="width: 150px; margin-left: 2%"
      @search="onSearch2"
    />
    <a-space>
      <a-select
        ref="select"
        v-model:value="value3"
        style="width: 150px; margin-left: 10%"
        placeholder="选择文章状态"
        :options="options1"
        @change="handleChange"
      ></a-select>
    </a-space>
    <a-button type="primary" style="margin-left: 20%" @click="allarticle">
      所有文章
    </a-button>
  </div>
  <div class="test">
    <a-table :columns="columns" :data-source="dataSource" rowKey="a_id">
      <template #action="{ record }">
        <a-button type="primary" ghost @click="singlearticle(record)">
          审核
        </a-button>
      </template>
      <template #a_status="{ record }">
        <template v-if="record.a_status === 0">
          <span>
            <a-tag color="red">审核未通过</a-tag>
          </span>
        </template>
        <template v-else-if="record.a_status === 1">
          <a-tag color="green">审核已通过</a-tag>
        </template>
        <template v-else-if="record.a_status === 2">
          <a-tag color="red">已删除</a-tag>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { cloneDeep } from "lodash-es";
import { defineComponent, reactive, ref } from "vue";
import { post, get, tip, setLocalToken } from "@/common";
import { SearchOutlined, UserOutlined } from "@ant-design/icons-vue";

import { useRoute, useRouter } from "vue-router";
const router = useRouter(); //获取路由器
const route = useRoute(); //获取当前路由器

//文章列表
const columns = [
  {
    title: "文章编号",
    dataIndex: "a_id",
    width: "15%",
    slots: {
      customRender: "a_id",
    },
  },
  {
    title: "用户帐号",
    dataIndex: "u_id",
    width: "15%",

    slots: {
      customRender: "u_id",
    },
  },
  {
    title: "文章标题",
    dataIndex: "a_title",
    width: "17%",

    slots: {
      customRender: "a_title",
    },
  },
  
  {
    title: "发布日期",
    dataIndex: "a_date",
    width: "15%",
    slots: {
      customRender: "a_date",
    },
  },
  {
    title: "状态",
    dataIndex: "a_status",
    width: "13%",
    slots: {
      customRender: "a_status",
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    width: "10%",
    slots: {
      customRender: "action",
    },
  },
];

//获取文章内容
const data = ref([]);

get("/buser/articlemanage/getAllArticleList").then((res) => {
  data.value = res.data;
});

const allarticle = () => {
  get("/buser/articlemanage/getAllArticleList").then((res) => {
    data.value = res.data;
  });
};

//文章搜索

//文章编号搜索
const value1 = ref("");

const artID = reactive({
  a_id: "",
});
const onSearch1 = (searchValue) => {
  console.log(searchValue);
  artID.a_id = searchValue;
  post("/buser/articlemanage/getlistbyID", artID).then((res) => {
    data.value = res.data;
  });
};

//文章标题搜索
const value2 = ref("");
const artTitle = reactive({
  a_title: "",
});
const onSearch2 = (searchValue) => {
  console.log(searchValue);
  artTitle.a_title = searchValue;
  post("/buser/articlemanage/getlistbyTitle", artTitle).then((res) => {
    data.value = res.data;
  });
};

//文章状态搜索
const value3 = ref("");
const options1 = ref([
  {
    value: "ischecked",
    label: "已审核",
  },
  {
    value: "nochecked",
    label: "未审核",
  },
  {
    value: "isdeleted",
    label: "已删除",
  },
]);

// const focus = () => {
//   console.log("focus");
// };
const status = reactive({
  a_status: 0,
});
const handleChange = (value) => {
  console.log(`selected ${value}`);
  if (`${value}` == `ischecked`) {
    status.a_status = 1;
  } else if (`${value}` == `nochecked`) {
    status.a_status = 0;
  } else {
    status.a_status = 2;
  }
  post("/buser/articlemanage/getlistbyStatus", status).then((res) => {
    console.log(status);
    data.value = res.data;
  });
};

//表格填入获取数据
for (let i = 0; i < data.length; i++) {
  data.push({
    a_id: `${data[i].a_id}`,
    u_id: `${data[i].u_id}`,
    a_title: `${data[i].a_title}`,
    a_html: `${data[i].a_html}`,
    a_date: `${date[i].a_date}`,
    a_status: `${data[i].a_status}`,
  });
}

const dataSource = ref(data);

//审核按钮功能
const articleid = reactive({
  a_id: "",
  a_title: "",
  a_html: "",
  u_id: "",
});

const singlearticle = (articlenumber) => {
  articleid.a_id = articlenumber.a_id;
  articleid.a_title = articlenumber.a_title;
  articleid.a_html = articlenumber.a_html;
  articleid.u_id = articlenumber.u_id;
  const jsonStr = JSON.stringify(articleid);
  const encodeStr = encodeURIComponent(jsonStr);
  router.push({
    path: "/buser/singlearticlemanage",
    query: { data: encodeStr },
  });
};
</script>
<style>
.test {
  width: 60%;
  margin-left: 20%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.search {
  margin-left: 20%;
  margin-top: 1%;
  margin-bottom: 1%;
}
</style>